<template>
  <div class="body flex flex-b flex-wrap">
    <!-- 默认插槽 -->
    <div class="card text-c">
      <default-com>
        <!-- 这里可以访问父级的作用域但是不能访问子级的作用域，会报错如果需要展示子组件的数据，需要使用作用域插槽-->
        <div>这里是父节点传进来的结构和数据count{{ count }}</div>
      </default-com>
    </div>
    <!-- 具名插槽 -->
    <div class="card text-c">
      <name-com>
        <template v-slot:header> <div>父组件传入的头部</div></template>
        <div>父组件的主体部分</div>
        <template v-slot:foot><div>父组件的尾部部分</div></template>
      </name-com>
    </div>
    <!-- 作用域插槽 -->
    <div class="card">
      <h3>父组件:{{ count }}</h3>
      <button @click="add">添加</button>
      <scopeCom :count="count">
        <template #one="films">
          <ul>
            <li v-for="(item, index) in films.films" :key="index">
              {{ item.name }}
            </li>
          </ul>
        </template>
        <template #two="{ names }">
          <ul>
            <li v-for="(item, index) in names" :key="index">
              {{ item.name }}
            </li>
          </ul>
        </template>
      </scopeCom>
    </div>
    <div class="card2 text-c">
      <check-props
        name="顿健康"
        skill="唱歌 跳舞"
        male="男孩子"
        :age="18"
      ></check-props>
    </div>
  </div>
</template>

<script>
import defaultCom from './components/默认插槽.vue'
import nameCom from './components/具名插槽.vue'
import scopeCom from './components/作用域插槽'
import checkProps from './components/props校验.vue'
export default {
  name: 'app',
  components: {
    defaultCom,
    nameCom,
    scopeCom,
    checkProps
  },
  data () {
    return {
      count: 10
    }
  },
  methods: {
    add () {
      this.count++
    }
  }
}
</script>

<style lang="less" scope>
@import url('../src/assets/less/webCommon.less');
.body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  // border: 1px solid #000;
  .card {
    width: 30%;
    height: 60%;
    margin-bottom: 20px;
    border: 1px solid #000;
  }
  .card2 {
    width: 30%;
    height: 30%;
    border: 1px solid #000;
  }
}
</style>
